{% extends 'base.html' %}

{% block sidebar %}
<div class="sidebar">
	<h3>Menu</h3>
	<ul>
    	<li><a href="/timelines/{{timeline_id}}/events/search">Alterar Data</a></li>
  	</ul>
</div>
{% endblock %}

{% block content %}

<div class="content">
	<script>
		$("#events_menu").addClass("selected");
	</script>  

	{% ifequal action "List" %}
	
		<p>A lista abaixo apresenta os eventos existentes para o dia {{date}} </p>
		<p>Se o evento a ser adicionado não estiver na lista, clique em Adicionar Novo Evento 
			para incluir as informações deste evento.</p>
	
		<form action="" method="get" id="edit_event">
			<input type="hidden" name="event_id" id="event_id" value="" />
			<input type="hidden" name="action" id="action" value="" />
			<input type="hidden" name="date" id="date" value="{{date}}" />				
		
		
			<div class="list_container">
				<ul class="list">
					{% for event in events %}
					<li>
						<div class="list display_event" id={{ event.id }}>{{ event }}</div>
					</li>
					{% endfor %}
				</ul>	
			</div>
			
			<script>
				$.each($("div.display_event"), function(){
					$(this).click(function() {
						$("#action").attr("value", "Edit");
						$("#event_id").attr("value", this.id);
						$("#edit_event").submit();	
					});
				})	
			</script>
			
			<div class="button_container">
				<input type="hidden" name="events_count" id="events_count" value="{{events_count}}" />
				<input type="button" value="Adicionar Novo Evento" class="button" id="new_event" />	
			</div>		
			
		</form>							
		
	{% endifequal %}
</div>	
{% endblock %}
